<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.rect {
			  width: 80px;
			  height: 80px;
			  position: absolute;
			  left: -1000px;
			  top: -1000px;
			}
		</style>
	</head>
	<body>
		<div>
		  <div class="demo-container" id="demo-container">
			<video id="myVideo" width="320" height="240" preload autoplay loop muted style="position: absolute"></video>
			<canvas id="canvas" width="320" height="240" style="position: absolute" ></canvas>
		  </div>
		  <img id="every_face" src="" >
		 </<div>
	</body>
	<script src="js/track/tracking-min.js"></script>
	<script src="js/track/data/eye-min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/track/data/face-min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/track/data/mouth-min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">

    //激活摄像头
    navigator.getUserMedia  = navigator.getUserMedia ||
      navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia ||
      navigator.msGetUserMedia;
    navigator.getUserMedia({video:true}, gotStream,noStream);
	
	
    function gotStream(stream) {
	  console.info(myVideo)
      myVideo.srcObject = stream;//URL.createObjectURL(stream);
      myVideo.onerror = function () {
        //stream.stop();
		if (stream) {
			 stream.getTracks().forEach(function (track) { track.stop(); });
		}
      };
      stream.onended = noStream;
      myVideo.onloadedmetadata= () => myVideo.play();
    }

    function noStream(err)
    {
      alert(err);
    }

    //获取画布
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    //检测人脸
    var objects = new tracking.ObjectTracker(['face']);//,'eye','mouth'

    objects.on('track',function (event)
    {
        context.clearRect(0, 0, canvas.width, canvas.height);

        if(event.data.length  === 0)
        {

        }
        else
        {
           event.data.forEach(function(rect)
           {
            //在图中画框框
             context.strokeStyle = '#a64ceb';
             context.strokeRect(rect.x, rect.y, rect.width, rect.height);
             context.font = '11px Helvetica';
             context.fillStyle = "#fff";
             context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
             context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
			
			 /* context.drawImage(myVideo, 0, 0, myVideo.width, myVideo.height);  
			 var url = canvas.toDataURL('image/png');  
			 console.info(url); */
           });
        }

    });

    //激活
    tracking.track('#myVideo', objects);

  </script>

</html>
